<template>
  <div id="operStatisticsSummary" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/statisticsSummary">统计汇总</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button v-if="tabflag === '0'" key="export-btn-driver" type="text" @click="exportDriverData"><i class="fa fa-download"></i><span>导出司机数据</span></Button>
          <Button v-else type="text" key="export-btn-company" @click="exportOrgData"><i class="fa fa-download"></i><span>导出物流公司数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>

    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="16">
            <FormItem label="统计日期">
              <Row>
                <Col :md="1" style="padding:0;">年</Col>
                <Col :md="7" style="padding-left:0;">
                  <DatePicker v-model="searchForm.year" type="year" :clearable="false" placeholder="请选择" style="width:100%;"></DatePicker>
                </Col>
                <Col :md="1" style="padding:0;">月</Col>
                <Col :md="7" style="padding-left:0;">
                  <Select v-model="searchForm.month" @on-change="monthChange" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :value="v" :key="`month-${i}`">{{`${v}月`}}</Option>
                  </Select>
                </Col>
                <Col :md="1" style="padding:0;">日</Col>
                <Col :md="7" style="padding-left:0;">
                  <Select v-model="searchForm.day" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in daylist" :value="v" :key="`day-${i}`">{{`${v}日`}}</Option>
                    <ul v-if="!daylist.length" class="ivu-select-not-found" style=""><li>请先选择月份</li></ul>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col :md="8" v-show="tabflag === '0'" key="search-key-driver">
            <FormItem label="选择司机">
              <!-- <DriverComplete v-model="searchForm.driverIds" :multiple="true"></DriverComplete> -->
              <Input placeholder="请输入姓名或手机号" v-model="searchForm.driverCondition" clearable/>
		        </FormItem>
          </Col>
          <Col :md="8" v-show="tabflag === '1'" key="search-key-company">
            <FormItem label="选择公司">
              <Select placeholder="请选择机构" v-model="searchForm.orgIds" clearable>
                <Option v-for="(v,i) in companyList" :value="v.id" :key="`company-stat-options-${i}`">{{v.orgName}}</Option>
              </Select>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main">
      <Tabs type="card" v-model="tabflag" :animated="false">
        <TabPane name="0" label="按司机统计">
          <div class="table-content">
						<div class="table" style="margin:0;">
							<table>
								<thead>
									<th width="16%">统计合计</th>
									<th width="12%">平均综合安全指数</th>
									<th width="12%">行驶里程合计</th>
									<th width="12%">行驶时长合计</th>
									<th width="12%">不良操作行为合计</th>
									<th width="12%">不良驾驶行为合计</th>
                  <th width="12%">违章数合计</th>
                  <th width="12%">事故数合计</th>
								</thead>
								<tbody>
									<tr  v-if="!isLoading && driverSumData!=null ">
										<td>{{driverSumData.dataTimeStr}}</td>
										<td>{{driverSumData.avgSafetyIndex!=null?`${driverSumData.avgSafetyIndex}`:'--'}}</td>
										<td>{{driverSumData.sumMileage!=null?`${driverSumData.sumMileage/1000}km`:'--'}}</td>
										<td>{{driverSumData.sumDuration?time(driverSumData.sumDuration,1):'--'}}</td>
                    <td>{{driverSumData.sumBadOperationTimes!=null?`${driverSumData.sumBadOperationTimes}`:'--'}}次</td>
                    <td>{{driverSumData.sumBadDriveTimes!=null?`${driverSumData.sumBadDriveTimes}`:'--'}}次</td>
                    <td>{{driverSumData.sumWzTimes!=null?`${driverSumData.sumWzTimes}`:'--'}}次</td>
                    <td>{{driverSumData.sumAccidentTimes!=null?`${driverSumData.sumAccidentTimes}`:'--'}}次</td>
									</tr>
                  <tr v-else>
                      <td colspan="8">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
					</div>
          <div class="table-content">
						<div class="table">
							<table>
								<thead>
									<th width="8%">统计日期</th>
									<th width="8%">司机</th>
									<th width="12%">综合安全指数</th>
									<th width="12%">行驶里程</th>
									<th width="12%">行驶时长</th>
									<th width="12%">不良操作行为</th>
                  <th width="12%">不良驾驶行为</th>
                  <th width="12%">违章数</th>
                  <th width="12%">事故数</th>
								</thead>
								<tbody>
                  <tr v-for="(v,i) in driverPageData.thisPageElements" :key="`oper-statistics-summary-driver-list-key-${v.driverId}`">
                    <td>{{v.dataTimeStr}}</td>
                    <td>{{v.driverName}}</td>
                    <td>{{v.safetyIndex!=null?`${v.safetyIndex}`:'--'}}</td>
                    <td>{{v.mileage!=null?`${v.mileage/1000}km`:'--'}}</td>
                    <td>{{v.duration?time(v.duration,1):'--'}}</td>
                    <td>{{v.badOperationTimes!=null?`${v.badOperationTimes}`:'--'}}次</td>
                    <td>{{v.badDriveTimes!=null?`${v.badDriveTimes}`:'--'}}次</td>
                    <td>{{v.totalWzTimes!=null?`${v.totalWzTimes}`:'--'}}次</td>
                    <td>{{v.accidentTimes!=null?`${v.accidentTimes}`:'--'}}次</td>
                  </tr>
                  <tr v-if="!isLoading && driverPageData.totalNumberOfElements <= 0">
                    <td colspan="11">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
					</div>
          <Page :total="driverPageData.totalNumberOfElements" :page-size="driverPageData.pageSize" :current="driverCurrent" @on-change="loadDriverPage" show-total></Page>
        </TabPane>
        <TabPane name="1" label="按物流公司统计">
          <div class="table-content">
						<div class="table" style="margin:0;">
							<table>
								<thead>
									<th width="16%">统计合计</th>
									<th width="6%">司机数</th>
									<th width="6%">车辆数</th>
									<th width="12%">平均综合安全指数</th>
									<th width="10%">行驶里程合计</th>
									<th width="12%">行驶时长合计</th>
                  <th>违章合计</th>
                  <th>事故合计</th>
                  <th>不良操作行为合计</th>
                  <th>不良驾驶行为合计</th>
								</thead>
								<tbody>
									<tr v-if="!isLoading && orgSumData!=null">
										<td>{{orgSumData.dataTimeStr}}</td>
										<td>{{orgSumData.driverCount!=null?`${orgSumData.driverCount}`:'--'}}</td>
										<td>{{orgSumData.vehicleCount!=null?`${orgSumData.vehicleCount}`:'--'}}</td>
                    <td>{{orgSumData.avgSafetyIndex!=null?`${orgSumData.avgSafetyIndex}`:'--'}}</td>
                    <td>{{orgSumData.sumMileage!=null?`${orgSumData.sumMileage/1000}km`:'--'}}</td>
                    <td>{{orgSumData.sumDuration?time(orgSumData.sumDuration,1):'--'}}</td>
                    <td>{{orgSumData.sumWzTimes!=null?`${orgSumData.sumWzTimes}`:'--'}}次</td>
                    <td>{{orgSumData.sumAccidentTimes!=null?`${orgSumData.sumAccidentTimes}`:'--'}}次</td>
                    <td>{{orgSumData.sumBadOperationTimes!=null?`${orgSumData.sumBadOperationTimes}`:'--'}}次</td>
                    <td>{{orgSumData.sumBadDriveTimes!=null?`${orgSumData.sumBadDriveTimes}`:'--'}}次</td>
									</tr>
                  <tr v-else>
                      <td colspan="10">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
					</div>
          <div class="table-content">
						<div class="table">
							<table>
								<thead>
									<th width="8%">统计日期</th>
									<th width="8%">物流公司</th>
									<th width="6%">司机数</th>
									<th width="6%">车辆数</th>
									<th width="12%">综合安全指数</th>
									<th width="10%">行驶里程</th>
                  <th width="12%">行驶时长</th>
                  <th>违章数</th>
                  <th>事故数</th>
                  <th>不良操作行为</th>
                  <th>不良驾驶行为</th>
								</thead>
								<tbody>
									<tr v-for="(v,i) in orgPageData.thisPageElements" :key="`oper-statistics-summary-org-list-key-${v.orgId}`">
                    <td>{{v.dataTimeStr}}</td>
                    <td>{{v.orgName}}</td>
                    <td>{{v.driverCount?`${v.driverCount}`:'--'}}</td>
                    <td>{{v.vehicleCount?`${v.vehicleCount}`:'--'}}</td>
                    <td>{{v.safetyIndex!=null?`${v.safetyIndex}`:'--'}}</td>
                    <td>{{v.mileage!=null?`${v.mileage/1000}km`:'--'}}</td>
                    <td>{{v.duration?time(v.duration,1):'--'}}</td>
                    <td>{{v.totalWzTimes!=null?`${v.totalWzTimes}`:'--'}}次</td>
                    <td>{{v.accidentTimes!=null?`${v.accidentTimes}`:'--'}}次</td>
                    <td>{{v.badOperationTimes!=null?`${v.badOperationTimes}`:'--'}}次</td>
                    <td>{{v.badDriveTimes!=null?`${v.badDriveTimes}`:'--'}}次</td>
									</tr>
                  <tr v-if="!isLoading && orgPageData.totalNumberOfElements <= 0">
                    <td colspan="11">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
					</div>
          <Page :total="orgPageData.totalNumberOfElements" :page-size="orgPageData.pageSize" :current="orgCurrent" @on-change="loadOrgPage" show-total></Page>
        </TabPane>
        <Spin size="large" fix v-if="isLoading"></Spin>
      </Tabs>
    </div>


  </div>
</template>
<style lang="less" src="@/assets/styles/operation/statistics-summary.less"></style>

<script>
  import moment from 'moment'
  import {mapState,mapActions} from 'vuex'
  import {download} from '@/util/request'
  import unit                  from '@/util/unit'


  export default {
    mounted(){
      this.search();
    },
    data(){
      return {
        tabflag:'0', // 0=按驾驶员，1=按机构
        driverCurrent:1,
        orgCurrent:1,
        searchForm:{year:moment().toDate(),month:null,day:null,dataTime:null,orgIds:null,driverCondition:''},
        submitForm:{}
      };
    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('operation/statisticsSummary',['driverPageData','orgPageData','driverSumData','orgSumData','isLoading']),
      daylist(){
        if (!this.searchForm.month) return [];
        let m = moment(`${moment(this.searchForm).format('YYYY')}-${this.searchForm.month}-01`);
        let d = m.daysInMonth();
        let ary = [];
        for (let i = 1; i <= d; i++){
          ary.push(i);
        }
        return ary;
      },
      companyList(){
        return this.userinfo.lowerOrgs.filter(o => o.parentId === '1');
      }
    },
    methods:{
      ...mapActions('operation/statisticsSummary',['reloadDriverPage','init','reloadOrgPage','reloadDriverData','reloadOrgData']),
      moment,
      time:unit.time,
      monthChange(v){
        this.searchForm.day = null;
      },
      search(){
        let dataTime='';
        if(this.searchForm.year!==''){
          dataTime=moment(this.dataTime).format('YYYY');
        }
        if (this.searchForm.month!=='' && this.searchForm.month!==null  && this.searchForm.month!==undefined) {
          dataTime+='-';
          dataTime+=this.searchForm.month<10?'0'+this.searchForm.month:this.searchForm.month;
        }
        if (this.searchForm.day!=='' && this.searchForm.day!==null && this.searchForm.day!==undefined) {
            dataTime+='-';
            dataTime+=this.searchForm.day<10?'0'+this.searchForm.day:this.searchForm.day;
        }
        this.searchForm.dataTime=dataTime;
        this.submitForm = {...this.searchForm};
        this.orgCurrent = 1;
        this.driverCurrent=1;
        this.init({...this.submitForm});
      },
      loadDriverPage(i){
        this.driverCurrent = i;
        this.reloadDriverPage({pageNum:this.driverCurrent,...this.submitForm});
      },
      loadOrgPage(i){
        this.orgCurrent = i;
        this.reloadOrgPage({pageNum:this.orgCurrent,...this.submitForm});
      },
      exportDriverData(){
        download('/stat/total/driverStatExport',this.submitForm);
      },
      exportOrgData(){
        download('/stat/total/orgStatExport',this.submitForm);
      }
    }
  }
</script>
